@use "sass:color";

@function harden($color, $modifier: 1) {
  @return color.adjust($color, $lightness: - (6% * $modifier));
}

$white: #fff;
$black: #000;

$red: #f34570;
$red--alpha--light: rgba($red, 0.1);
$red--alpha--medium: rgba($red, 0.2);

$blue: #349cf4;
$blue--light: color.adjust($blue, $lightness: 7%);
$blue--lighter: color.adjust($blue, $lightness: 40%);
$blue--soft: rgba($blue, 0.05);
$blue--hard: harden($blue, 1.5);
$blue--darker: color.adjust($blue, $lightness: -20%);

$light-blue: #e9eef2;
$dark-blue: #1d2938;

$green: #39ce83;
$green--light: color.adjust($green, $lightness: 7%);
$green--hard: harden($green, 1.3);
$green--darker: color.adjust(#39ce83, $lightness: -4%);

$medium-grey: #abbac7;
$medium-grey--lighter: #b9c7d3;
$medium-grey--soft: rgba($medium-grey, 0.15);

$grey: #8899a8;
$grey--soft: rgba($grey, 0.15);
$grey--light: color.adjust($grey, $lightness: 7%);
$grey--lighter: color.adjust($grey, $lightness: 25%);
$grey--hard: harden($grey, 1.75);
$grey--harder: harden($grey, 1);

$dark-grey: #34516c;
$dark-grey--light: color.adjust($dark-grey, $lightness: 7%);
$darker-grey: #1d2938;
$darkest-grey: #28303b;
$darkest-grey--hard: #293341;
$darkest-grey--darker: #202d3c;

$light-grey: #e9eef2;
$light-grey--lighter: #f8f9fb;
$light-grey--soft: rgba($light-grey, 0.15);
$light-grey--hard: harden($light-grey);

$another-grey: #3a4553;

$background: $dark-blue;
$foreground: #53718a;

$sidebar--background: $darkest-grey--hard;
$sidebar--foreground: #526780;
$main-content--background: $light-blue;

$textbox--background: #242b36;
$textbox--foreground: #5e728c;
$textbox--border: #1a2028;
$textbox--fulfilled--background: $textbox--background;
$textbox--placeholder: #424d5e;
$textbox--selection--foreground: #1a2028;
$textbox--selection--background: $blue--lighter;
$textbox--active--background: $textbox--background;
$textbox--active--border: $blue;
$textbox--active--foreground: $blue;
$textbox--active--placeholder: $textbox--placeholder;

$table--heading--color: #abbac7;

$action--foreground--hover: $blue;
$action--background--hover: rgba(#333e4a, 0.05);
$action--border--hover: rgba(#333e4a, 0.15);
